<template>
    <div class="counter">
        <label @click="counterLeft">-</label>
        <!-- <input type="text" v-model="countNum"> -->
        <!-- <input v-if="precision == 2" type="text" v-model="countNum" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
        <input v-if="precision == 0" type="text" v-model="countNum" onkeyup="value=value.replace(/[^\d]/g,'')"> -->
        <input v-if="precision == 2" type="number" v-model="countNum" @keyup="yanzheng">
        <input v-if="precision == 0" type="number" v-model="countNum" @input="countNum = Number($event.target.value.replace(/\D+/, ''))">
        <label @click="counterRight">+</label>
    </div>
</template>
<script>
export default {
    name:'counter',
    data() {
        return {
          countNum:0
        }
    },
    methods:{
       counterLeft(){
          if(this.countNum == 0){
              return
          }
          this.countNum--
       
       },
       counterRight(){
          this.countNum++
         
       },
        yanzheng(){
            if (this.countNum != '' && this.countNum.substr(0, 1) == '.') {
                this.countNum = "";
            }
            this.countNum = this.countNum.replace(/^0*(0\.|[1-9])/, '$1');//粘贴不生效
            this.countNum = this.countNum.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
            this.countNum = this.countNum.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
            this.countNum = this.countNum.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            this.countNum = this.countNum.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
            if (this.countNum.indexOf(".") < 0 && this.countNum != "") {//以上已经过滤，若无小数点，首位不能为类似于 01、02的金额
                if (this.countNum.substr(0, 1) == '0' && this.countNum.length == 2) {
                this.countNum = this.countNum.substr(1, this.countNum.length);
                }
            }
        }
    },
    props:{
        defaultVal:{
            type:Number,
            default:0
        },
        precision:{
            type:Number,
            default:0
        }
    },
     watch:{
        countNum(newVal,oldVue){

        }
    },
   mounted () {       
    //    this.countNum = this.defaultVal
   }
}
</script>
<style scope>
    .counter{
       width:3.48rem;
        height:0.72rem;
        border:1px solid rgba(209, 212, 214, 1);
        display: inline-block;
        border-radius:0.08rem;
   }
   .counter label{
        display: inline-block;
        width: 0.80rem;
        height: 0.72rem;
        background: rgba(234,238,241,1);
        font-size: 0.5rem;
        line-height: 0.72rem;
        text-align: center;
        color: #0A8DE5;
   }
   .counter input{
          width: 1.7rem;
        /* height: 0.5rem; */
        line-height: 0.5rem;
        /* margin-top: -0.1rem; */
        font-size: 0.32rem;
        text-align: center;
        color: #333;
   }
</style>